<template>
  <div class="snow-page">
    <div class="snow-inner">
      <a-form ref="formRef" auto-label-width :model="formData.form">
        <a-row :gutter="16">
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
            <a-form-item field="fuwu" label="志愿服务队">

              <a-select v-model="formData.form.fuwu" placeholder="志愿服务队" allow-clear allow-search>
                <a-option v-for="item in optionsList" :key="item.id" :label="item.name" :value="item.id">
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
            <a-space class="search-btn">
              <a-button type="primary" @click="getCommonTableList">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="onReset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>

            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-card class="margin-top" :bordered="false">
        <a-row align="center">
          <a-col :span="24">
            <a-tabs :type="type" :size="size" @tab-click="handleClick">
              <a-tab-pane key="1" title="队伍信息">
                <a-table row-key="key" size="small" :bordered="{
                  cell: true
                }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :loading="loading" :columns="columns"
                  :data="data1" :row-selection="rowSelection" v-model:selectedKeys="selectedKeys"
                  :pagination="pagination" @page-change="pageChange" @page-size-change="pageSizeChange">
                  <template #volunteerName="{ record }">
                    <a href="javaScript:void(0)" style="text-decoration: none;" @click="toShowDeatils(record)">{{
                      record.volunteerName }}</a>
                  </template>

                  <template #optional>
                    <a-space>
                      <a-button size="mini" type="primary">详情</a-button>
                      <a-button size="mini">修改</a-button>
                      <a-popconfirm content="确定删除这条数据吗?" type="warning">
                        <a-button size="mini" type="primary" status="danger">删除</a-button>
                      </a-popconfirm>
                    </a-space>
                  </template>
                </a-table>
              </a-tab-pane>
              <a-tab-pane key="2" title="志愿活动">
                <a-table row-key="key" size="small" :bordered="{
                  cell: true
                }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :loading="loading" :columns="columns2"
                  :data="data2" :row-selection="rowSelection2" v-model:selectedKeys="selectedKeys2"
                  :pagination="pagination2" @page-change="pageChange2" @page-size-change="pageSizeChange2">
                </a-table>
              </a-tab-pane>
              <a-tab-pane key="3" title="发现环境问题">

              </a-tab-pane>
            </a-tabs>
          </a-col>
          <a-col :span="24"> </a-col>
        </a-row>
      </a-card>

    </div>

    <a-modal v-model:visible="visible" width="50%" :footer="false">
      <template #title>
        队员信息
      </template>
      <div>
        <a-table row-key="key" size="small" :bordered="{
          cell: true
        }"  :loading="loading" :columns="columns3" :data="data3"
          :row-selection="rowSelection3" v-model:selectedKeys="selectedKeys3" :pagination="pagination3"
          @page-change="pageChange3" @page-size-change="pageSizeChange3">
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { getbthTeamList, getbthMemberList } from "@/api/modules/bthTeam/index";
import { getbthActivityList } from "@/api/modules/bthActivity/index";
import { List, FormData, RowSelection, Pagination } from "./config";
const formData = reactive({
  form: {
    name: "",
    phone: "",
    email: "",
    address: "",
    status: null,
    year: "",
    fuwu: "1"
  },
  search: false
});

const visible = ref(false)

const optionsList = ref([
  {
    id: "1",
    name: "区级"
  },
  {
    id: "2",
    name: "乡镇"
  },
])
const type = ref("rounded");
const size = ref("medium");
const selectedKeys = ref<string[]>([]);
const rowSelection = reactive<RowSelection>({
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false
});

const selectedKeys2 = ref<string[]>([]);
const rowSelection2 = reactive<RowSelection>({
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false
});

const selectedKeys3 = ref<string[]>([]);
const rowSelection3 = reactive<RowSelection>({
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false
});
const pagination = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
const pageChange = (page: number) => {
  pagination.value.current = page;
};
const pageSizeChange = (pageSize: number) => {
  pagination.value.pageSize = pageSize;
};



const pagination2 = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
const pageChange2 = (page: number) => {
  pagination2.value.current = page;
};
const pageSizeChange2 = (pageSize: number) => {
  pagination2.value.pageSize = pageSize;
};


const pagination3 = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
const pageChange3 = (page: number) => {
  pagination3.value.current = page;
};
const pageSizeChange3 = (pageSize: number) => {
  pagination3.value.pageSize = pageSize;
};
const columns = [
  {
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number }) => {
      return rowIndex + 1
    }
  },
  {
    title: "队伍名称",
    dataIndex: "volunteerName",
    slotName: "volunteerName"
  },
  {
    title: "联系方式",
    dataIndex: "volunteerPhone",
    align: "center"
  },
  {
    title: "负责人",
    dataIndex: "memberIdDictMap.name",

  },

  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];

const formRef = ref();
const onReset = () => {
  formRef.value.resetFields();
  getCommonTableList();
};
const loading = ref<boolean>(false);
const data1 = ref([
]);
const getCommonTableList = async () => {
  let obj = {
    "bthTeamDtoFilter": {
      "volunteerLevel": formData.form.fuwu
    },
    "orderParam": null,
    "pageParam": {
      "pageNum": pagination.value.current,
      "pageSize": pagination.value.pageSize,
      "count": true
    }
  }
  try {
    loading.value = true;
    let res = await getbthTeamList(obj);
    data1.value = res.data.dataList;
    pagination.value.total = res.data.totalCount;
  } finally {
    loading.value = false;
  }
};
getCommonTableList();

const getCommonTableList2 = async () => {
  let obj = {
    "bthActivityDtoFilter": {
      "volunteerLevel": formData.form.fuwu
    },
    "orderParam": null,
    "pageParam": {
      "pageNum": pagination2.value.current,
      "pageSize": pagination2.value.pageSize,
      "count": true
    }
  }
  try {
    loading.value = true;
    let res = await getbthActivityList(obj);
    data2.value = res.data.dataList;
    pagination.value.total = res.data.totalCount;
  } finally {
    loading.value = false;
  }
};

const columns2 = [
  {
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number }) => {
      return rowIndex + 1
    }
  },
  {
    title: "活动内容",
    dataIndex: "content",

  },
  {
    title: "服务时长",
    dataIndex: "serviceDuration",
    align: "center"
  },
  {
    title: "参与人数",
    dataIndex: "attendance",

  },

  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];

const data3 = ref([])



const columns3 = [
  {
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number }) => {
      return rowIndex + 1
    }
  },
  {
    title: "姓名",
    dataIndex: "memberName",

  },
  {
    title: "联系方式",
    dataIndex: "volunteerPhone",

  },


  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];

const data2 = ref([])

function toShowDeatils(val: any) {

  gettmData(val)
  visible.value = true
}

async function gettmData(val: any) {
  let obj = {
    "bthMemberDtoFilter": {
      "volunteerLevel": formData.form.fuwu,
      "teamId": val.id
    },
    "orderParam": null,
    "pageParam": {
      "pageNum": pagination3.value.current,
      "pageSize": pagination3.value.pageSize,
      "count": true
    }
  }
  let res = await getbthMemberList(obj)
  data3.value = res.data.dataList
}

function handleClick(type: any) {

  if (type == 1) {
    getCommonTableList();
  } else if (type == 2) {
    getCommonTableList2();
  }
}
</script>

<style lang="scss" scoped>
.search-btn {
  margin-bottom: 20px;
}
</style>
